<template>
    <div class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <div class="main">
        <div class="title"><span>接受约见</span></div>
        <div class="isTrue" style="position: relative"><span>{{expertInfo.State?'开启中':'关闭中'}}</span><mt-switch v-model="isStart"></mt-switch><span @click="onOff()" style="display:block; position:absolute; width: .52rem; height: .32rem; right: .15rem;"></span></div>
        <div class="contentWrap">
            <div class="content" @click="changeStatus('popupVisible', true)">行家介绍<span>内容<i></i></span></div>
        </div>
        <div class="contentWrap">
            <div class="content" @click="changeStatus('popupJop', true)">职业介绍<span>内容<i></i></span></div>
        </div>
        <div class="line"></div>
        <div class="domain">行家话题（最多三个）</div>
        <div @click="toDetailsPage('/changeTheme', item)" class="contentWrap" v-if="index<3" v-for="(item, index) in expertInfo.MessageDetail.theme">
            <div class="content">{{item.Title}}<span>内容<i></i></span></div>
        </div>
        <router-link v-if="getDateSuccess && expertInfo.MessageDetail.theme.length < 3" :to="{path:'/changeTheme',query: {'PostMessageId': expertInfo.PostMessageId}}"><div class="add border_b">添加+</div></router-link>
        <div class="line"></div>
        <div class="domain">干货知识（最多10个）</div>
        <div @click="toDetailsPage('/upload', item)" class="contentWrap" v-if="index<10" v-for="(item, index) in expertInfo.MessageDetail.course">
          <div class="content"> {{item.Title}} <span>{{item.Type == 1?'语音':'视频'}}<i></i></span></div>
        </div>
        <router-link v-if="getDateSuccess && expertInfo.MessageDetail.course.length <10" :to="{path: '/upload', query: {'PostMessageId': expertInfo.PostMessageId}}"><div class="add border_b">添加+</div></router-link>
        <!-- <div class="title"><i class="icon"></i>数据统计</div> -->
        <div class="moneyTitle_0314">
          <span class="moneySpan_0314"><i class="i2_0314"></i>数据统计</span>
          <router-link to="/extract"><span class="wallet_0314">钱包 >></span></router-link>
        </div>
        <div class="income">
          <div class="item1">
            <div class="moneyDiv">
              <!-- <span><i class="moneyIcon"></i>钱包</span> -->
            </div>
            <div class="money">¥{{expertInfo.Monery}}</div>
            <p class="text2_0314">总收入</p>
          </div>
          <div class="item2 border_r">
            <div class="number">{{expertInfo.PraiseCount}}</div>
            <p class="text2_0314">被赞数</p>
          </div>
          <div class="item2">
            <div class="number">{{expertInfo.AppointmentCount}}</div>
            <p class="text2_0314">约见人数</p>
          </div>
        </div>
        <div class="line"></div>
        <div class="recommend">
          <div class="personNum">已有<span>{{expertInfo.ASKRecommendCount}}</span>位用户推荐</div>
          <div class="persons">
            <span v-for="(item, index) in expertInfo.ASKRecommend" v-if="index<5" :style="{background:'url('+ item.HeadUrl + ') no-repeat center center', backgroundSize:'cover'}"></span>
          </div>
          <div class="share">分享到</div>
        </div>
        <ul class="bottomUL">
          <li @click="showTip"><i class="wx"></i></li>
          <li @click="showTip"><i class="circle"></i></li>
          <li><i @click="jumpWeb()" class="sendFriend"></i></li>
        </ul>
        <mt-popup style="background: none!important"
          v-model="popup.popupVisible"
          position="center">
          <div class="wrap">
            <h1>行家介绍</h1>
            <textarea class="textareas" v-model.trim="expertInfo.Introduce"></textarea>
            <button class="oBtn" @click="changeDesc('popupVisible')">确定</button>
          </div>
        </mt-popup>
        <mt-popup style="background: none!important"
          v-model="popup.popupJop"
          position="center">
          <div class="wrap">
            <h1>职业介绍</h1>
            <textarea class="textareas" v-model.trim="expertInfo.Job"></textarea>
            <button class="oBtn" @click="changeDesc('popupJop')">确定</button>
          </div>
        </mt-popup>
      </div>
      <div v-if="tips" class="showTip">
        <span @click="showTip"></span>
      </div>
    </div>
</template>
<script>
import myHeader from './base/myHeader';
import { Switch, Toast } from 'mint-ui';
import Client from '../assets/js/common';
import Apis from '../assets/js/expertApi';
import hgjSkip from '../assets/js/hgjSkip';
import {zdUrl,webUrl,chatAppId } from '../assets/api';
import { Popup } from 'mint-ui';
import myButton from './base/myButton';
import {setShare} from '../assets/js/wxConfig';
export default {
  data () {
    return {
      login: null,
      tips:false,
      popup: {
        popupVisible: false,
        popupJop: false
      },
      
      myObj: {
        type: 2,
        text: "我的行家"
      },
      applyInfo: null,
      isStart: false,
      getDateSuccess: false, // 初始化数据成功
      expertInfo: { 
        PostMessageId: '', //行家ID
        State: 0, // 状态 0关闭，1开启
        PraiseCount: 0, // 被赞数
        Count: 0, // 被查看数
        MessageDetail: {
          theme: [], // 约见话题
          course: [] // 干货教程
        }, // 行家明细
        Monery: 0, // 钱包金额
        AppointmentCount: 0, // 约见人数
        ASKRecommendCount: 0, // 推荐人数
        ASKRecommend: [], // 推荐人信息
        Introduce: '', // 行家介绍
      },
    }
  },
  created() {
    hgjSkip.skip().then(res =>{
      this.login = res;
      this.getMyExpertInfo(res[1]);
      this.applyInfo = Client.getStore('applyInfo');
      if(!this.applyInfo){
        this.getApplyInfo().then(res=>{
          this.shareConfig(this.applyInfo);
        });
        return;
      }
      this.shareConfig(this.applyInfo);
    });
  },
  methods: {
    events(i){
      if(i == 2){
         history.back();
      }
    },
    changeStatus(str,status){
      if(!this.getDateSuccess) return;
      this.popup[str] = status;
    },
    async changeDesc(type) {
      if(type == 'popupVisible') {
        await Apis.updateMyIntroduce({...this.login[1],"Introduce": this.expertInfo.Introduce})
      }else if (type == 'popupJop') {
        await Apis.updateMyJob({...this.login[1], "Job":this.expertInfo.Job}) 
      }
      Toast('修改行家信息成功');
      this.popup[type] = false;
    },
    async getApplyInfo(){
      let data = await Apis.getExpertinfo({...this.login[0]});
      this.applyInfo = data.Result;
      Client.setStore('applyInfo',this.applyInfo);
    },
    async getMyExpertInfo(res) { // 获取我的行家数据
      let obj = await Apis.getMyExpertInfo(res);
      console.log("初始数据", obj)
      if(obj.ErrorCode == 0) {
        if(obj.Result.ASKRecommend != '[]' && obj.Result.ASKRecommend && obj.Result.ASKRecommend.length > 0) {
          obj.Result.ASKRecommend.forEach(e => { // 处理获取的推荐人信息
            let ASKRobj = {
              OpenId: null,
              HeadUrl: null,
            }
            ASKRobj.OpenId = e.OpenId;
            ASKRobj.HeadUrl = e.HeadUrl;
            this.expertInfo.ASKRecommend.push(ASKRobj)
          });
        }
        obj.Result.MessageDetail.forEach(e => {
          let messageItem = {};
          messageItem.Tallys = [];
          messageItem.State = e.EState; // 状态
          if(e.EKind == 0) { // 约见信息
            messageItem.PostMessageId = ''; // 行家信息主表id
            messageItem.EPostMesssageDetailId = e.EPostMesssageDetailId; // 行家信息明细表id
            messageItem.EKind= 0; // 添加的种类 0约见信息 1，知识信息
            messageItem.Type= 0; // 类型 0.图文（约见必须为图文），1.语音 2.视频
            messageItem.Title= e.ETitle; // 标题
            messageItem.Describe= e.EDescribe; // 描述
            messageItem.PicUrl= e.EPicUrl; // 背景图片链接
            messageItem.ThumPicUrl= e.EThumPicUrl; // 缩略图链接
            messageItem.Schema= e.ESchema; // 约见模式 约见时必传。 1，一对一 2，一对多
            messageItem.Money= e.EMoney; // 约见金额 约见信息时必须大于0
            messageItem.SeeTime= e.ESeeTime; // 约见时间
            messageItem.Location= e.ELocation; // 约见地点
            this.expertInfo.MessageDetail.theme.push(messageItem);
          }else { // 知识信息
            messageItem.PostMessageId = ''; // 行家信息主表id
            messageItem.EPostMesssageDetailId = e.EPostMesssageDetailId; // 行家信息明细表id
            messageItem.EKind = 1; // 添加的种类 0约见信息 1，知识信息
            messageItem.Type= e.EType; // 类型 0.图文（约见必须为图文），1.语音 2.视频
            messageItem.Title = e.ETitle; // 标题
            messageItem.Describe = e.EDescribe; // 描述
            messageItem.Money= e.EMoney; // 购买金额必须大于0
            messageItem.VoiceUrl = e.EVoiceUrl; // 语音链接 根据类型 判断可传必传
            messageItem.VideoUrl = e.EVideoUrl; // 视频链接 根据类型 判断可传必传
            this.expertInfo.MessageDetail.course.push(messageItem);
          }
          e.Tallys.forEach(ele => {
            let tally = {};
             tally.RelationshipTallyId = ele.RelationshipTallyId;
             tally.Tally = ele.Tally;
             messageItem.Tallys.push(tally);
          })
        })
        // if(obj.Result.Tallys && obj.Result.Tallys.length > 0) {
        //   obj.Result.Tallys.forEach(e => {
        //     console.log(111,e)
        //   })
        //   messageItem.Tallys.push()
        // }
        // 处理获取的数据
        this.expertInfo.ASKRecommendCount = obj.Result.ASKRecommendCount;
        this.expertInfo.AppointmentCount = obj.Result.AppointmentCount;
        this.expertInfo.Monery = obj.Result.Monery;
        this.expertInfo.PostMessageId = obj.Result.PostMessageId;
        this.expertInfo.PraiseCount = obj.Result.PraiseCount;
        this.expertInfo.Count = obj.Result.Count;
        this.expertInfo.State = obj.Result.State;
        this.expertInfo.Introduce = obj.Result.Introduce;
        this.expertInfo.Job = obj.Result.Job;
        this.getDateSuccess = true;
        console.log("处理的数据",this.expertInfo)
      }

    },
    async onOff() {
      if(!this.getDateSuccess) return;
      if(this.expertInfo.State) {
        this.expertInfo.State = 0;
      }else{
        this.expertInfo.State = 1;
      }
      let data = await Apis.updateExpertStateInfo({...this.login[1],"State": this.expertInfo.State})
    },
    jumpWeb(){
      let shareData = {CollectUrl:`${webUrl}verifyPass?sid=${this.login[1].OpenId}`, CollectTitle:'行家推荐', CollectImgUrl:this.applyInfo.HeadUrl};
      location.href = `${zdUrl}editShare?type=1&AppId=${chatAppId}&OpenId=${this.login[1].OpenId}&objs=${encodeURIComponent(JSON.stringify(shareData))}`;
    },
    toDetailsPage(pageName,obj) {
      obj.PostMessageId = this.expertInfo.PostMessageId;
      this.$router.push(pageName);
      Client.setStore("MessageDetailItem", obj)
    },
    showTip(){
      this.tips = !this.tips;
    },
    shareConfig(data) {
      setShare({
        title: '行家推荐',
        desc: '请推荐我成为行家',
        link: webUrl + 'verifyPass?sid=' + data.OpenId,
        imgUrl: data.HeadUrl
      });
    }
  },
  watch: {
    "expertInfo.State": function(){
      if(this.expertInfo.State) {
        this.isStart = true;
      }else {
        this.isStart = false;
      }
    }
  },
  components: {
    myHeader,
    mtSwitch: Switch,
    Popup,
    myButton
  }
}

</script>
<style>
  .mint-switch-input:checked + .mint-switch-core {
    border-color: #557AFF;
    background-color: #557AFF;
  }
</style>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    .showTip{
      width:100%;
      height:100%;
      position:fixed;
      top:0;
      left:0;
      z-index:10;
      background:rgba(0,0,0,.7);
      span{
        height:100%;
        margin:0 .6rem;
        display: block;
        background:url('../assets/img/expert/shareTip.png') no-repeat center .2rem;
        background-size: contain;
      }
    }
    .main {
      width: 100%;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
      .wrap{
        background: #fff;
        padding-bottom: 0.3rem;
        width: 3.2rem;
        border-radius: .05rem;
        h1 {
          display: block;
          width: 100%;
          height: .47rem;
          background: #557AFF;
          color: white;
          font-size: .18rem;
          margin: 0 auto;
          line-height: .47rem;
          text-align: center;
          font-weight: normal;
          margin: 0 0 0.3rem;
          border-radius:.04rem .04rem 0 0;
        }
        .textareas {
          display: block;
          width: 90%;
          height: 3rem;
          border: .01rem solid #ddd;
          padding: .1rem;
          font-size: .14rem;
          color: #888888;
          box-sizing: border-box;
          margin:0 auto .3rem;
        }
        .oBtn {
          display: block;
          width: 90%;
          height: .47rem;
          border-radius: .05rem;
          background: #557AFF;
          border: none;
          color: white;
          font-size: .18rem;
          margin: 0 auto;
        }
      }
        
      .bottomUL {
        display: flex;
        li {
          width: 33%;
          display: flex;
          align-content: center;
          justify-content: center;
          padding: .2rem 0;
          span{
            display: block;
          }
          i {
            display: block;
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            &.sendFriend {
              border-radius: 0;
              background: url('../assets/img/expert/Group 4@3x.png') center center;
              background-size: cover;
              background-repeat: no-repeat;
            }
            &.wx {
              background: url('../assets/img/expert/icon_wei@3x.png') center center;
              background-size: cover;
              background-repeat: no-repeat;
            }
            &.circle {
              background: url('../assets/img/expert/icon_p@3x.png') center center;
              background-size: cover;
              background-repeat: no-repeat;
            }
          }
        }
      }
      .recommend {
        padding: .15rem;
        box-sizing: border-box;
        background: white;
        .personNum {
          height: .4rem;
          line-height: .4rem;
          color: #555555;
          font-size: .16rem;
          font-weight: bold;
          span {
            padding: 0 .07rem;
            color: blue;
          }
        }
        .persons {
          height: .97rem;
          background: white;
          border-top: .01rem solid #E5E5E5;
          border-bottom: .01rem solid #E5E5E5;
          display: flex;
          align-items: center;
          
          span {
            display: block;
            width: .53rem;
            height: .53rem;
            background: url('../assets/img/my@3x.png') center center;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 50%;
            margin-right: .2rem;
            &:nth-last-child(1){
              margin-right: 0rem;
            }
          }
        }
        .share {
          height: .51rem;
          line-height: .51rem;
          color: #555555;
          font-size: .2rem;
          text-align: center;
          background: white;
        }
      }
      .income {
        width: 3.75rem;
        height: 2.15rem;
        background: white;
        >div {
          height: 1.07rem;
          float: left;
          .text2_0314 {
            font-size: .16rem;
            display: flex;
            justify-content: center;
            color: #39393D;
            text-align: center;
          }
          &.item1 {
            width: 3.75rem;
            border-bottom: .01rem solid #E5E5E5;
            
            .money {
              height: .36rem;
              color: #557AFF;
              font-size: .36rem;
              line-height: .36rem;
              font-weight: bold;
              text-align: center;

            }
            .moneyDiv {
              padding-top: .1rem;
              height: .22rem;
              display: flex;
              justify-content: flex-end;
              >span{
                display: flex;
                width: .7rem;
                align-items: center;
                font-size: .16rem;
                color: #39393D;
                .moneyIcon {
                  display: block;
                  width: .19rem;
                  height: .19rem;
                  line-height: .19rem;
                  border-radius: 50%;
                  background: #828282;
                  margin-right: .08rem;
                }
              }
              
            }
          
          }
          &.item2 {
            width: 1.85rem;
            .number {
              padding-top: .2rem;
              height: .36rem;
              color: #39393D;
              font-size: .36rem;
              line-height: .36rem;
              font-weight: bold;
              text-align: center;
            }
          }
          &.border_r {
            border-right: .01rem solid #E5E5E5;
          }
        }
        
      }
      .moneyTitle_0314 {
        padding: .18rem .15rem 0;
        height: .5rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .wallet_0314 {
          color: #39393D;
          font-size: .16rem;
        }
        .moneySpan_0314 {
          display: flex;
          align-items: center;
          height: .2rem;
          line-height: .2rem;
          font-size: .18rem;
          color: #39393D;
          .i2_0314 {
            display: inline-block;
            width: .19rem;
            height: .19rem;
            
            background: url("../assets/img/expert/icon_masr@3x.png");
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: .08rem;
          }

        }
        
      }
      .title {
        height: .39rem;
        background: #EFEFF4;
        color: #888888;
        font-size: .14rem;
        padding-left: .15rem;
        display: flex;
        align-items: center;
        .icon {
          display: block;
          width: .19rem;
          height: .19rem;
          line-height: .19rem;
          border-radius: 50%;
          background: #828282;
          margin-right: .08rem;
        }
      }
      .line {
        height: .1rem;
        background: #EFEFF4;
      }
      .isTrue {
        height: .44rem;
        display: flex;
        justify-content:space-between;
        padding: 0 .15rem;
        box-sizing: border-box;
        background-color: white;
        align-items: center;
        span {
          font-size: .17rem;
          color: #000;
          font-weight: bold;
        }
      }
      .domain {
        height: .43rem;
        line-height: .43rem;
        padding-left: .15rem;
        background: white;
        font-size: .14rem;
        color: #888888;
        //border-bottom: .01rem solid #ccc;
        input{
          width: 100%;
          font-size: .14rem;
          color: #888888;
        }
      }
      .add {
        height: .44rem;
        line-height: .44rem;
        text-align: center;
        font-size: .17rem;
        color: #39393D;
        font-weight: bold;
        background: white;
        text-indent: .15rem;
      }
      .border_b {
        border-top: .01rem solid #E5E5E5;
      }
      .contentWrap {
        height: .46rem;
        background: white;
        padding-left: .15rem;
        .content {
          height: .43rem;
          line-height: .43rem;
          border-top: .01rem solid #E5E5E5;
          font-size: .16rem;
          font-weight: 600;
          padding-right: .15rem;
          span {
            float: right;
            color: #888888;
            font-weight: 400;
            display: flex;
            align-items: center;
            i{
              display: block;
              width: .16rem;
              height: .16rem;
              background: url("../assets/img/person/icon_go09@3x.png");
              background-size: cover;
              background-repeat: no-repeat;
            }
          }
        }
        
      }
      
    }
    
  }
</style>
